<template>
    <!-- 瀑布流 -->

    <!-- 点击事件父元素写，传4个图片子接受 -->
    <!-- @click="goDetail1(v)" -->
    <div :class="{
        one:!flag,
        two:flag
    }">
        <img :src="img1">
        <p >{{ proname }}</p>
        <p class="price">
            ￥<span>{{ originprice }}</span><span>销量:{{ sales }}</span>
        </p>
    </div>

</template>

<script>

export default {
    data() {
        return {
            // 列表商品

        }
    },
    //接收父homePage请求数据与猜你喜欢数据
    props: {
        img1: {
            type: String
        },
        proname: {
            type: String
        },
        originprice: {
            type: Number
        },
        sales:{
            type: Number
        },
        flag:{
            type:Boolean
        }
    }
    ,
    mounted() {

    },
    methods: {
      
    },
}
</script>

<style scoped>
/* 列表商品 */
/* 列表商品 */
/* .list {
    width: 7rem;
    margin: auto;
    column-count: 2;
    column-gap: .13rem;
    margin-top: .5rem;
    font-size: .26rem;
    line-height: .4rem;
} */
.one {
    width: 3.42rem;
    
    height: 5rem;
    border-radius: .12rem;
    break-inside: avoid;
    margin: .18rem .09rem;
}
.two {
    width: 2.97rem;
    height: 5rem;
    border-radius: .12rem;
    break-inside: avoid;
    margin: .18rem .09rem;
}

img:nth-child(1) {
    width: 100%;
    height:3.42rem;
    border-radius: .12rem;
    
}
p{
    font-size: .28rem;
    height: .74rem;
    position: relative;
    overflow: hidden;
    line-height: .37rem;
    text-overflow: ellipsis;
    color: #333333;
    margin-top: .23rem;
    padding: 0 .18rem;
}
.price{
    width: 3.04rem;
    height: .4rem;
    display: flex;
    align-items: center;
    font-size: .24rem;
    margin-top: .23rem;
    padding: 0 .18rem;
    color: #ff5500;
}
.price span:nth-child(1){
    font-size: .28rem;
    margin-left: .04rem;
}
.price span:nth-child(2) {
  color: #999999;
    margin-left: .2rem;
}
</style>